<style>
  .button-container {
    display: flex;
    flex-wrap: nowrap;
  }

  .button-container .btn {
    white-space: nowrap;
  }
</style>
<!-- <div class="row">
  <h1 translate lib="web">agents</h1>
</div> -->
<div class="row">
  <div class="col-md-4">
  </div>
  <div class=" col-md-8 text-right">
    <em class="fas fa-cog fa-spin" ng-show="ctrl.loading==true" title="Hang on, loading data"></em>
    <a class="btn" href ng-click="ctrl.loadData()" title="Reload current data">
      <span translate lib="web">reload</span>
    </a>

    <input type="radio" id="checkbox-1" value="pods" ng-model="ctrl.show" ng-change="ctrl.loading = false; ctrl.page=0; ctrl.loadData()"> 
    <label for="checkbox-1"><span translate lib="web" >pods</span></label>

    <input type="radio" id="checkbox-2" value="docker" ng-model="ctrl.show" ng-change="ctrl.loading = false; ctrl.page=0; ctrl.loadData()"> 
    <label for="checkbox-2"><span translate lib="web" >docker</span></label>

    <input type="radio" id="checkbox-3" value="assistant" ng-model="ctrl.show" ng-change="ctrl.loading = false; ctrl.page=0; ctrl.loadData()"> 
    <label for="checkbox-3"><span translate lib="web" >assistant</span></label>

    <input type="radio" id="checkbox-4" value="daemon" ng-model="ctrl.show" ng-change="ctrl.loading = false; ctrl.page=0; ctrl.loadData()"> 
    <label for="checkbox-4"><span translate lib="web" >daemon</span></label>

    <input type="radio" id="checkbox-5" value="all" ng-model="ctrl.show" ng-change="ctrl.loading = false; ctrl.page=0; ctrl.loadData()"> 
    <label for="checkbox-5"><span translate lib="web" >all</span></label>

    <a href="#/Packages" class="btn btn-info" translate lib="web">packages</a>
    <a href="#/Agent" class="btn btn-info" translate lib="web">addagent</a>
  </div>
</div>
<div ng-show="ctrl.errormessage != ''" class=" alert alert-danger" role="alert">{{ctrl.errormessage}}</div>
<table id="table1" class="table table-striped table-hover table-sm" when-scrolled="ctrl.more()" style="width: 100%;">
  <thead class="thead-dark">
    <tr>
      <th scope="col" ng-click="ctrl.ToggleOrder('name')"><strong translate lib="web">name</strong></th>
      <th scope="col" ng-click="ctrl.ToggleOrder('image')"><strong translate lib="web">image</strong></th>
      <th scope="col" ng-click="ctrl.ToggleOrder('os')"><strong translate lib="web">os</strong></th>      
      <th scope="col" ng-click="ctrl.ToggleOrder('arch')"><strong translate lib="web">arch</strong></th>
      <th ng-show="menuctrl.WebSocketClientService.multi_tenant" scope="col" ng-click="ctrl.ToggleOrder('stripeprice')"><strong translate lib="web">$$</strong></th>
      
      <th scope="col" ng-click="ctrl.ToggleOrder('_createdby')"><strong translate lib="web">createdby</strong></th>
      <th scope="col" ng-click="ctrl.ToggleOrder('status')"><strong translate lib="web">status</strong></th>
      <th class="text-right"></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="model in ctrl.models">
      <td>
        <a ng-show="model.image != '' && model.image != null" ng-href="#/Agent/{{model._id}}">{{model.name | limitTo: 20}}</a>
        <a ng-show="model.image == '' || model.image == null" ng-href="#/Agent/{{model._id}}">{{model.name | limitTo: 20}}</a>
      </td>
      <td>{{ctrl.trimimage(model.image) }}</td>
      <td>{{model.os }}</td>
      <td>{{model.arch}}</td>
      <td ng-show="menuctrl.WebSocketClientService.multi_tenant" ><div ng-show="model.stripeprice != null && model.stripeprice != ''">*</div></td>
      <td>{{model._createdby | limitTo: 20}}</td>
      <td>{{model.status | limitTo: 20}}</td>
      <td class="text-right">
        <div class="button-container">
        <button ng-click="ctrl.StartAgent(model)" class="btn"  ng-disabled="ctrl.loading==true || (model.status == 'running' || model.status == 'Running') || model.status == '...'"><em
          class="fas fa-play"></em></button>
          <button ng-click="ctrl.StopAgent(model)" class="btn" ng-disabled="ctrl.loading==true || (model.status != 'running' && model.status != 'Running') || model.status == '...'"><em
            class="fas fa-stop"></em></button>
          <a ng-class="{disabled: (model.webserver != true && model.webserver != 'true') || (model.status != 'running' && model.status != 'Running')}" 
          ng-enabled="(model.webserver != true && model.webserver != 'true') || (model.status != 'running' && model.status != 'Running')" target="_blank" ng-href="{{ctrl.weburl(model)}}" class="btn">
            <em class="fas fa-project-diagram"></em></a>

        <a ng-href="#/RunPackage/{{model._id}}" class="btn"><em class="fas fa-tools"></em></a>
        <a ng-href="#/User/{{model.runas}}" class="btn"><em class="fas fa-user"></em></a>
        <a ng-href="#/Customer/{{model.customerid}}" class="btn" role="button" ng-hide="!menuctrl.WebSocketClientService.multi_tenant || model.customerid == '' || model.customerid == null">
          <em class="fas fa-industry"></em></a>
        <a href class="btn disabled" role="button" ng-show="!menuctrl.WebSocketClientService.multi_tenant || model.customerid == '' || model.customerid == null">
          <em class="fas fa-industry"></em></a>
          <a class="btn" href ng-click="ctrl.DeleteAgent(model)" ng-disabled="ctrl.loading==true"><em
          class="fas fa-trash"></em></a>
        
      </td>
    </tr>
  </tbody>
</table>